<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="shared-styles.html">

<dom-module id="build-executors">
    <template>
        <style include="shared-styles"></style>
        <style is="custom-style">
            :host {
                display: block;
                width: 30%;
                margin-right: 6px;
                padding-bottom: 32px;
            }

            .title {
                text-align: left;
                margin-left: 8px;
                display: block;
            }

            .executor {
                margin-bottom: 4px;
                margin-left: 6px;
                margin-right: 6px;
                cursor: pointer;
                min-height: 76px;
            }

            @media screen and (max-width: 576px) {
                .executor {
                    display: flex;
                    flex-flow: column;
                }
            }

            .executor:hover {
                opacity: 0.5;
                transition: opacity 0.2s;
            }

            .status {
                position: absolute;
                right: 6px;
                top: 4px;
            }

            .online {
                color: var(--primary-color);
            }

            .offline {
                color: var(--error-color);
            }

            .instance {
                margin-top: 6px;
                margin-left: 6px;
                font-size: 0.85em;
                opacity: 0.85;
            }

            .items {
                width: 100%;
                display: flex;
                flex-direction: column;
            }

            #spinner {
                display: block;
                margin: auto;
                margin-top: 12px;
            }

            paper-progress {
                --paper-progress-transition-duration: 4s;
                --paper-progress-transition-timing-function: ease;
                --paper-progress-transition-delay: 0s;
                --paper-progress-container-color: rgba(255, 255, 255, 0.12);
            }

            .cpu {
                position: absolute;
                left: 16px;
                right: 16px;
                width: auto;
                top: 42px;
            }

            .mem {
                position: absolute;
                left: 16px;
                right: 16px;
                width: auto;
                top: 64px;
            }

            .cpu-text {
                margin-left: 16px;
                font-size: 0.65em;
                opacity: var(--opacity);
            }

            .mem-text {
                margin-top: 10px;
                margin-left: 16px;
                font-size: 0.65em;
                opacity: var(--opacity);
                padding-bottom: 12px;
            }

            .info {
                margin-top: 4px;
            }

            .executing {
                text-align: center;
                position: absolute;
                top: 4px;
                left: 0px;
                right: 0px;
                font-size: 0.8em;
                opacity: var(--opacity);
            }

            .last-seen {
                margin-top: 16px;
                text-align: center;
                font-size: 0.8em;
                opacity: var(--opacity);
            }

        </style>

        <div class="container">
            <span class="title">
                <h4>Available executors

                    <template is="dom-if" if="[[!started]]">
                        <paper-spinner id="spinner" active></paper-spinner>
                    </template>
                </h4>
            </span>
        </div>

        <div class="items">
            <template is="dom-repeat" items="{{executors}}" as="executor">
                <paper-card class="executor" elevation="1">
                    <div class="instance">
                        [[executor.id]]
                    </div>

                    <template is="dom-if" if="[[!executor.online]]">
                        <div class="status offline">
                            offline
                        </div>
                        <div class="last-seen">
                            Last seen {{_toDate(executor.updated)}}
                        </div>
                    </template>
                    <template is="dom-if" if="[[executor.online]]">
                        <div class="status online">
                            online
                        </div>

                        <div class="info">

                            <div class="executing">
                                [[executor.builds]]/[[executor.capacity]]
                            </div>

                            <paper-progress class="cpu transiting"
                                            value="{{_toPercent(executor.cpu)}}"></paper-progress>
                            <paper-progress class="mem transiting"
                                            value="{{_toPercent(executor.mem)}}"></paper-progress>
                            <div class="cpu-text">
                                CPU {{_toPercent(executor.cpu)}}%
                            </div>
                            <div class="mem-text">
                                MEM {{_toPercent(executor.mem)}}%
                            </div>
                        </div>
                    </template>
                </paper-card>
            </template>
        </div>

        <iron-ajax id="executorsLoader" url="/api/" method="post" handle-as="json"
                   on-response="_onExecutors"></iron-ajax>

    </template>
</dom-module>
<script>
    class BuildExecutors extends Polymer.Element {

        static get is() {
            return 'build-executors';
        }

        ready() {
            super.ready();
            this.started = false;

            setInterval(() => {
                this._loadExecutors();
            }, 3000);

            this._loadExecutors();
        }

        _loadExecutors() {
            this.$.executorsLoader.body = JSON.stringify({
                token: application.token,
                target: 'builds',
                route: 'instances'
            });
            this.$.executorsLoader.generateRequest();
        }

        _toDate(epochMS) {
            return new Date(epochMS).toLocaleString();
        }

        _toPercent(value) {
            return Math.trunc(value * 100);
        }

        _onExecutors(event, request) {
            this.executors = request.response.collection;

            if (this.executors.length > 0) {
                this.started = true;
            } else {
                this.started = false;
            }
        }
    }

    window.customElements.define(BuildExecutors.is, BuildExecutors);
</script>
